<template>
  <div class="page-container">
    <page-form :model="form" ref="formRef" :rules="rules" layout="vertical">
      <card title="车辆信息">
        <!-- 如果地址栏传入了 carId 则显示carInfoBlock -->
        <car-info-block v-if="paramsCarId" :carInfo="carInfo" :fieldList="fieldList" />
        <!-- 地址栏未传入 carId 为无车辆id新增 -->
        <page-form-row v-else>
          <page-form-item field="carId" label="车牌号" :rules="{ required: true, message: '请选择车牌号' }">
            <remote-select
              v-model="form.carId"
              type="car_licenseno_list"
              :params="{
                idList: [paramsCarId],
                operateStatusList: [10, 20, 30, 40, 50],
              }"
              @change="changeCarFn"
            />
          </page-form-item>
          <page-form-item label="车架号">
            <i-input disabled :model-value="carInfo?.vin" />
          </page-form-item>
          <page-form-item label="车型">
            <i-input disabled placeholder="请选择" :model-value="carInfo?.modelName" icon="down" />
          </page-form-item>
          <page-form-item label="车辆当前归属门店">
            <i-input disabled placeholder="请选择" :model-value="carInfo?.siteName" icon="down" />
          </page-form-item>
          <page-form-item label="归属车场">
            <i-input disabled placeholder="请选择" :model-value="carInfo?.libraryName" icon="down" />
          </page-form-item>
        </page-form-row>
      </card>
      <card title="违章信息" :showDivider="false">
        <page-form-row>
          <page-form-item field="siteId" label="违章单关联门店" :rules="{ required: true, message: '请选择违章单关联门店' }">
            <remote-select v-model="form.siteId" :initStr="form.siteId ? form.siteName : ''" placeholder="请选择" type="site_listBystaff" />
          </page-form-item>
          <page-form-item label="违章时间" field="orderTime">
            <i-date-picker
              class="w-full"
              v-model="form.orderTime"
              :disabled="query.page === 'violation' || query.page === 'violationEnd'"
              :disabledDate="(current: string) => dayjs(current).isAfter(dayjs())"
              :disabledTime="(current: string) => getDisabledTime(current)"
              show-time
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="onDateChange"
            />
          </page-form-item>
          <page-form-item label="违章发生方" field="violationParty">
            <template #iconSlot v-if="form.existConfirmFee || form.existConfirmCostFee">
              <a-tooltip content="关联的费用已结算，不允许修改">
                <icon-exclamation-circle-fill style="font-size: 16px; color: red" />
              </a-tooltip>
            </template>
            <a-radio-group
              v-model="form.violationParty"
              :disabled="query.page === 'violationEnd' || form.existConfirmFee || form.existConfirmCostFee"
              :options="dict.violationPartyEnum"
              @change="onChangeViolation"
            />
          </page-form-item>
          <page-form-item label="关联订单号">
            <template #label-extra>交车人：{{ form.giveStaffName || '-' }}</template>
            <a-input v-if="isDisableOrder" v-model="form.orderCode" :disabled="isDisableOrder || query.page === 'violationEnd'">
              <template #suffix>
                <icon-down />
              </template>
            </a-input>
            <a-select
              v-else
              placeholder="请选择"
              allow-search
              :disabled="query.page === 'violation' || query.page === 'violationEnd' || !(form.orderTime && form.carId)"
              v-model="form.orderId"
              @change="changeOrderIdFn"
              :allow-clear="!handelDisabledEventAmount ? (form.existConfirmCostFee ? false : true) : false"
              @clear="clearOrderInfo"
            >
              <a-option v-for="item in shortOrderIdList" :key="item.value" :value="item.value" :label="item.label">
                {{ item.orderNo }}
              </a-option>
            </a-select>
          </page-form-item>
          <page-form-item label="违章城市">
            <city-cascader v-model="form.eventCityCode" @change="changeCityFn" />
          </page-form-item>
          <page-form-item label="违章地点" size="2/3">
            <i-input v-model="form.eventAddress" max-length="200" />
          </page-form-item>
          <page-form-item label="违章行为">
            <i-input v-model="form.eventContent" max-length="200" />
          </page-form-item>
          <page-form-item label="罚分">
            <i-input-number v-model="form.eventScore" :precision="0" max="99" unit="分" />
          </page-form-item>
          <page-form-item label="罚款">
            <template #iconSlot v-if="form.existConfirmFee">
              <a-tooltip content="费用已结算，如需修改请前往流水驳回或撤销费用后，进行修改">
                <icon-exclamation-circle-fill style="font-size: 16px; color: red" />
              </a-tooltip>
            </template>
            <i-input-number :disabled="handelDisabledEventAmount" v-model="form.eventAmount" />
          </page-form-item>
          <div class="w-full"></div>
          <page-form-item label="处理方" field="handleType" size="2/3">
            <template #iconSlot v-if="form.existConfirmFee || form.existConfirmCostFee">
              <a-tooltip content="关联的费用已结算，不允许修改">
                <icon-exclamation-circle-fill style="font-size: 16px; color: red" />
              </a-tooltip>
            </template>
            <a-radio-group
              v-model="form.handleType"
              :disabled="query.page === 'violationEnd' || form.existConfirmFee || form.existConfirmCostFee"
              :options="violationHandleEnum"
              @change="onHandleTypeChange"
            />
          </page-form-item>

          <div class="w-full"></div>
        </page-form-row>
        <div class="handel-box">
          <page-form-row>
            <page-form-item v-if="query.page === 'violation' || query.page === 'violationEnd'" label="负责人" field="staffId">
              <remote-select
                v-model="form.staffId"
                placeholder="请选择"
                type="staff_authOrg"
                :params="{ oldId: form.staffId, siteIdList: [carInfo.siteId] }"
                :mountedLoad="!!form.carId"
              />
            </page-form-item>
            <page-form-item v-else label="负责人">
              <remote-select
                v-model="form.staffId"
                placeholder="请选择"
                type="staff_authOrg"
                :params="{ oldId: form.staffId, siteIdList: [carInfo.siteId] }"
                :mountedLoad="!!form.carId"
              />
            </page-form-item>
            <page-form-item v-if="form.handleType == 1" label="具体代办方式">
              <sysdict-select :disabled="query.page === 'violationEnd'" v-model="form.specificHandleWay" code="violation_agent_type" />
            </page-form-item>
            <page-form-item label="代办服务费" v-if="form.handleType == 1" labelTooltipContent="代办服务费不包含罚款">
              <template #iconSlot v-if="form.existConfirmFee">
                <a-tooltip content="费用已结算，如需修改请前往流水驳回或撤销费用后，进行修改">
                  <icon-exclamation-circle-fill style="font-size: 16px; color: red" />
                </a-tooltip>
              </template>
              <i-input-number :disabled="handelDisabledEventAmount" v-model="form.handleAmount" />
            </page-form-item>
            <page-form-item label="代办真实成本" v-if="form.handleType == 1">
              <template #iconSlot v-if="!!paramsCarId && form.existConfirmCostFee">
                <a-tooltip content="费用已结算，如需修改请前往流水驳回或撤销费用后，进行修改">
                  <icon-exclamation-circle-fill style="font-size: 16px; color: red" />
                </a-tooltip>
              </template>
              <i-input-number
                :disabled="query.page === 'violationEnd' || (!!paramsCarId && form.existConfirmCostFee)"
                v-model="form.handleRealCost"
              />
            </page-form-item>
            <page-form-item
              label="违章押金收取方式"
              field="violationChargeType"
              labelTooltipContent="收/付款方式支持在系统管理菜单下的收支账号管理页面进行配置"
            >
              <a-select
                placeholder="请选择"
                v-model="form.violationChargeType"
                :options="inExpWayList"
                @focus="getInExpWayEnums"
                allow-clear
              />
            </page-form-item>
            <page-form-item label="备注" :size="form.handleType == 1 ? '2/3' : '1/3'">
              <i-input v-model="form.remark" />
            </page-form-item>

            <page-form-item v-if="query.page === 'violation' || query.page === 'violationEnd'" label="上传附件" size="1" field="fileIdList">
              <upload-img v-model="form.fileIdList" limit="30" />
            </page-form-item>
            <page-form-item v-else label="上传附件" size="1">
              <upload-img v-model="form.fileIdList" limit="30" />
            </page-form-item>
          </page-form-row>

          <card v-if="form.handleType != 1" title="行驶证记录" :showDivider="false" style="background-color: transparent">
            <page-form-row :gutter="24" v-for="(item, index) in form.driveLicenseRecordList" :key="item.label">
              <page-form-item :label="`${item.label}时间`" :prop="`form.driveLicenseRecordList[${index}].driveLicenseUseTime`" size="1/4">
                <i-date-picker
                  v-model="item.driveLicenseUseTime"
                  style="width: 100%"
                  show-time
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择"
                />
              </page-form-item>
              <page-form-item :label="item.name" :prop="`form.driveLicenseRecordList[${index}].depositState`" size="1/4">
                <a-select v-model="item.depositState" placeholder="请选择" allow-clear>
                  <a-option :value="1">是</a-option>
                  <a-option :value="2">否</a-option>
                </a-select>
              </page-form-item>
              <page-form-item label="押金金额" :prop="`form.driveLicenseRecordList[${index}].depositAmount`" size="1/4">
                <i-input-number v-model="item.depositAmount" :precision="0" :max="9999999999" />
              </page-form-item>
              <page-form-item label="上传凭证" :prop="`form.driveLicenseRecordList[${index}].fileIdList`" size="1/4">
                <upload-attach v-model="item.fileIdList" :accept="['jpg', 'jpeg', 'png']" :single="false" />
              </page-form-item>
            </page-form-row>
          </card>
        </div>
      </card>
    </page-form>
  </div>
  <page-form-footer @ok="submitFn" :ok-loading="okLoading" />
</template>

<script setup name="CarViolationForm" lang="ts">
  import { ref, provide, onMounted, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { addViolation, getRelationOrderNo, editViolation, getViolationDetail, getOrder, inExpWayEnums } from '@/api/asset/carViolation'
  import { getCarDetail } from '@/api/asset/car'
  import { usePageDict } from '@/hooks/useDict'
  import useNavigate from '@/hooks/useNavigate'
  import dayjs from 'dayjs'
  import useUserStore from '@/store/modules/user'
  import { cloneDeep } from 'lodash-es'
  import { getDepositType } from '@/api/order/sOrder'
  import { getDepositWay } from '@/api/order/czsOrder'
  import { Message } from '@arco-design/web-vue'

  const userStore = useUserStore()
  const { navigateBack } = useNavigate()
  const dict = usePageDict('carviolationDict')

  const violationHandleEnum = ref([
    { label: '租车公司', value: 1 },
    { label: '客户处理', value: 2 },
  ])
  // 车辆显示信息
  const fieldList = ref([])
  // 关联订单号
  const shortOrderIdList = ref<any[]>([])
  const driveLicenseRecordList = [
    {
      label: '行驶证借出',
      name: '是否收取押金',
      driveLicenseUseState: 1,
      driveLicenseUseTime: '',
      depositState: null,
      depositAmount: null,
      fileIdList: [],
    },
    {
      label: '行驶证归还',
      name: '是否归还押金',
      driveLicenseUseState: 2,
      driveLicenseUseTime: '',
      depositState: null,
      depositAmount: null,
      fileIdList: [],
    },
  ]
  // 车辆列表新增违章 传递参数 carId
  const carInfo = ref<{ siteId?: any; siteName?: any }>({})
  const formRef = ref()
  const okLoading = ref(false)
  const form = ref<any>({
    eventCityCode: '', // 违章城市
    handleType: 1, // 处理方
    orderTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), // 违章时间
    violationParty: 0,
    driveLicenseRecordList: cloneDeep(driveLicenseRecordList),
  })
  const rules = {
    orderTime: { required: true, message: '请选择违章时间' },
    handleType: { required: true, message: '请选择处理方' },
    staffId: { required: true, message: '请选择负责人' },
    fileIdList: { required: true, message: '请上传附件' },
  }
  provide('form', form)

  const handelDisabledEventAmount = computed(() => {
    if (form.value.handleType == 1) {
      if (paramsCarId && form.value.existConfirmFee) {
        return true
      } else if (query.page === 'violationEnd' && form.value.existConfirmFee) {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  })

  const onChangeViolation = (val: string | number | boolean) => {
    if (val == 0) {
      form.value.handleType = 1
      violationHandleEnum.value = [
        { label: '租车公司', value: 1 },
        { label: '客户处理', value: 2 },
      ]
    } else {
      form.value.handleType = 3
      violationHandleEnum.value = [{ label: '员工处理', value: 3 }]
      form.value.handleAmount = null
      form.value.handleRealCost = null
      form.value.specificHandleWay = null
    }
  }

  /**
   * 处理方切换
   * @param {number} val 处理方 id
   */
  const onHandleTypeChange = (val: any) => {
    form.value.handleType = val
    if (val === 2) {
      form.value.handleAmount = null
      form.value.handleRealCost = null
      form.value.specificHandleWay = null
    }
  }

  /**
   * 车牌号切换
   * @param {any} _
   * @param {any} option 车牌号信息
   */
  const changeCarFn = (_: any, option = {}) => {
    carInfo.value = option
    form.value.siteId = carInfo.value.siteId
    form.value.siteName = carInfo.value.siteName
    formRef.value.validateField(['siteId'])
    clearOrderId()
    if (form.value.carId && form.value.orderTime) {
      getOrderNumber(form.value.carId, form.value.orderTime)
    }

    if (!form.value.staffId) {
      form.value.staffId = userStore.employeeId
    }
  }

  /**
   * 违章时间选择
   * @param {string} value 违章时间
   */
  const onDateChange = (value: any) => {
    form.value.orderTime = value
    clearOrderId()
    if (form.value.carId && form.value.orderTime) {
      getOrderNumber(form.value.carId, form.value.orderTime)
    }
  }

  /**
   * 获取短租订单押金收取方式
   */
  const getSorderInExpWayList = (id: number) => {
    getDepositType({ id }).then((res: any) => {
      console.log('getSorderInExpWayList: ', res)
      const { violationDepositFee } = res.result
      if (violationDepositFee) {
        if (violationDepositFee.feeStatus == 1) {
          form.value.violationChargeType = -99
        } else {
          const index = inExpWayList.value.findIndex((item: any) => item.value == violationDepositFee.payType)
          if (index > -1) {
            form.value.violationChargeType = violationDepositFee.payType
          } else {
            form.value.violationChargeType = null
          }
        }
      }
    })
  }

  /**
   * 获取长租订单押金收取方式
   */
  const getLorderInExpWayList = (id: number) => {
    getDepositWay({ id }).then((res: any) => {
      console.log('getLorderInExpWayList: ', res)
      const { violationDepositFee } = res.result
      if (violationDepositFee) {
        if (violationDepositFee.feeStatus == 1) {
          form.value.violationChargeType = -99
        } else {
          const index = inExpWayList.value.findIndex((item: any) => item.value == violationDepositFee.payType)
          if (index > -1) {
            form.value.violationChargeType = violationDepositFee.payType
          } else {
            form.value.violationChargeType = null
          }
        }
      }
    })
  }

  /**
   * 获取关联订单号
   * @param {number} carId 车辆id
   * @param {string} orderTime 违章时间
   */
  const isDisableOrder = ref(false)
  const getOrderNumber = (carId: any, orderTime: any) => {
    getRelationOrderNo({
      carId,
      orderCode: !query.page ? '' : form.value.orderCode,
      orderTime,
      dzOrderTime: orderTime,
      orderTypeList: [2, 3], //关联长租、短租
      useAuth: 1,
      oldOrderType: form.value.orderType,
      oldOrderId: form.value.orderId,
    }).then((res: any) => {
      const { result } = res
      isDisableOrder.value = query.page && result.length < 2 ? true : false
      shortOrderIdList.value = result

      result.forEach((item: any) => {
        item.label = '【' + item.orderTypeStr + '】' + item.orderNo
        item.value = item.orderId
      })

      if (result.length > 0) {
        if (!form.value.oldIdList) {
          form.value.oldIdList = result[0].giveStaffId ? [result[0].giveStaffId] : []
        }

        if (!paramsCarId || query.page == 'carManage' || query.page == 'shortOrder' || query.page == 'longOrder') {
          form.value.orderId = result[0].orderId //默认第一个
          form.value.orderCode = result[0].orderNo
          form.value.staffId = result[0].giveStaffId //默认第一个
          form.value.orderType = result[0].orderType
          form.value.giveStaffName = result[0].giveStaffName
        }

        if (result[0].orderType == 3 && !form.value.violationChargeType) {
          getLorderInExpWayList(result[0].orderId)
        }

        if (result[0].orderType == 2 && !form.value.violationChargeType) {
          getSorderInExpWayList(result[0].orderId)
        }
      }
    })
  }

  /**
   * 关联订单号切换
   * @param {number} value 订单号 orderId
   */
  const changeOrderIdFn = (value: any) => {
    form.value.orderId = value
    form.value.violationChargeType = undefined

    shortOrderIdList.value.forEach((item) => {
      if (item.value === value) {
        form.value.giveStaffName = item.giveStaffName
        form.value.staffId = item.giveStaffId
        form.value.orderType = item.orderType
      }
    })

    const orderType = shortOrderIdList.value.find((item) => item.value === value)?.orderType
    if (orderType == 3) {
      getLorderInExpWayList(value)
    }
    if (orderType == 2) {
      getSorderInExpWayList(value)
    }
  }

  const clearOrderInfo = () => {
    form.value.orderId = undefined
    form.value.orderCode = undefined
    form.value.orderType = undefined
    form.value.giveStaffName = undefined
  }

  /**
   * 生成从 start 到 end 的数组
   * @param {number} start
   * @param {number} end
   */
  function range(start: any, end: any) {
    const result = []
    for (let i = start; i < end; i++) {
      result.push(i)
    }
    return result
  }

  /**
   * 获取禁用时间
   */
  function getDisabledTime(current: any) {
    if (!dayjs().isSame(dayjs(current), 'day')) {
      return {}
    }

    const hour = dayjs().hour() + 1
    const minute = dayjs().minute() + 1
    const second = dayjs().second() + 1

    if (dayjs(current).hour() < hour - 1) {
      return {
        disabledHours: () => range(hour, 24),
      }
    } else if (dayjs(current).minute() < minute - 1) {
      return {
        disabledHours: () => range(hour, 24),
        disabledMinutes: () => range(minute, 60),
      }
    } else {
      return {
        disabledHours: () => range(hour, 24),
        disabledMinutes: () => range(minute, 60),
        disabledSeconds: () => range(second, 60),
      }
    }
  }

  // 违章城市切换
  const changeCityFn = (value: any, option: any) => {
    // 省编码
    form.value.provinceCode = option.provinceCode
  }

  const submitFn = (noticeSuccess: () => void) => {
    formRef.value.validate((error: any) => {
      if (!error) {
        okLoading.value = true

        const param = {
          ...form.value,
          eventTime: dayjs(form.value.orderTime).format('YYYY-MM-DD HH:mm:ss'),
        }

        // 车辆违章编辑
        if (paramsCarId && !query.page) {
          param.eventStatus = 0
        }

        // 处理违章
        if (query.page === 'violation') {
          param.eventStatus = 1
        }

        // 车辆违章-新增违章
        // 其他页面-新增违章
        if (!paramsCarId || query.page === 'carManage' || query.page === 'shortOrder' || query.page === 'longOrder') {
          if (query.page === 'carManage') {
            param.carId = paramsCarId
          }
          if (query.page === 'shortOrder' || query.page === 'longOrder') {
            param.orderId = paramsCarId
            param.orderType = query.page === 'shortOrder' ? 2 : 3
          }
          addViolation(param)
            .then(() => {
              noticeSuccess()
              navigateBack()
            })
            .finally(() => {
              okLoading.value = false
            })
        } else {
          // 罚款和代办服务费收款不允许清空订单
          // 代办真实费用收款不允许清空订单
          // if ((form.value.existConfirmFee || form.value.existConfirmCostFee) && form.value.orderId == undefined) {
          //   Message.error('为保证费用准确，请添加关联订单号')
          //   okLoading.value = false
          //   return
          // }
          param.id = paramsCarId
          editViolation(param)
            .then(() => {
              noticeSuccess()
              navigateBack()
            })
            .finally(() => {
              okLoading.value = false
            })
        }
      }
    })
  }

  /**
   * 获取违章详情
   * @param {number} id 违章id
   */
  const getViolationList = (id: string | number | string[]) => {
    getViolationDetail({ id }).then(({ result }) => {
      const data = {
        ...result,
        modelName: result.carModelName,
      }
      if (!data.driveLicenseRecordList || data.driveLicenseRecordList.length == 0) {
        data.driveLicenseRecordList = cloneDeep(driveLicenseRecordList)
      } else {
        driveLicenseRecordList.forEach((item: any, index: number) => {
          data.driveLicenseRecordList[index] = {
            ...item,
            driveLicenseUseTime: data.driveLicenseRecordList[index].driveLicenseUseTime,
            depositState: data.driveLicenseRecordList[index].depositState,
            depositAmount: data.driveLicenseRecordList[index].depositAmount,
            fileIdList: data.driveLicenseRecordList[index].fileIdList,
          }
        })
      }

      if (data.violationParty == 0) {
        violationHandleEnum.value = [
          { label: '租车公司', value: 1 },
          { label: '客户处理', value: 2 },
        ]
      } else {
        violationHandleEnum.value = [{ label: '员工处理', value: 3 }]
      }

      data.specificHandleWay = data.specificHandleWay ? +data.specificHandleWay : undefined

      carInfo.value = data
      form.value = data

      if ((query.page === 'violation' || query.page === 'violationEnd') && !form.value.staffId) {
        form.value.staffId = userStore.employeeId
      }

      form.value.orderTime = data.eventTime
      form.value.orderId = !+data.orderId ? undefined : +data.orderId

      if ((query.page === 'violation' || query.page === 'violationEnd') && !form.value.orderId) {
        return
      }

      getOrderNumber(data.carId, data.eventTime)
    })
  }

  /**
   * 获取车辆详情
   * @param {number} id 车辆id
   */
  const getCarInfo = (id: string | number | string[]) => {
    if (query.page !== 'carManage') {
      const type = query.page === 'shortOrder' ? 2 : 3
      isDisableOrder.value = true
      getOrder({ id, type }).then((res: any) => {
        console.log('shortOrder getCarInfo: ', res)
        const { orderId, orderCode, giveStaffName, carId, startTime, giveStaffId, type } = res.result
        form.value.carId = carId
        form.value.orderCode = orderCode
        form.value.orderId = orderId
        form.value.siteId = res.result.siteId
        form.value.siteName = res.result.siteName
        if (!form.value.staffId) {
          form.value.staffId = userStore.employeeId
        }
        form.value.staffId = giveStaffId
        // 用来编辑回显
        form.value.oldIdList = [giveStaffId]
        form.value.giveStaffName = giveStaffName
        form.value.orderTime = dayjs(startTime)

        getCarDetail({ id: carId }).then(({ result }) => {
          carInfo.value = result

          if (type == 3 && !result.violationChargeType) {
            getLorderInExpWayList(orderId)
          }

          if (type == 2 && !result.violationChargeType) {
            getSorderInExpWayList(orderId)
          }
        })
      })
    } else {
      getCarDetail({ id }).then(({ result }) => {
        carInfo.value = result
        form.value.siteId = result.siteId
        form.value.siteName = result.siteName
        if (!form.value.staffId) {
          form.value.staffId = userStore.employeeId
        }
      })
    }
  }

  const inExpWayList = ref([])
  const getInExpWayEnums = () => {
    inExpWayEnums().then((res: any) => {
      inExpWayList.value = res.inExpWayList
    })
  }

  const route = useRoute()
  const paramsCarId = route.params.id // 车辆违章编辑

  // query.page: violationEnd 车辆违章已处理违章
  // query.page: violation 车辆违章处理违章
  // query.page: carManage 车辆管理新增违章
  // query.page: shortOrder 短租订单详情新增违章
  // query.page: longOrder 长租订单详情新增违章
  const query = route.query

  onMounted(() => {
    getInExpWayEnums()
    fieldList.value = [
      { label: '车架号', prop: 'vin' },
      {
        label: '车辆当前归属门店',
        prop: query.page === 'carManage' || query.page === 'shortOrder' || query.page === 'longOrder' ? 'siteName' : 'carSiteName',
      },
      { label: '归属车场', prop: 'libraryName' },
    ]
    // 车辆违章编辑
    if (paramsCarId) {
      if (query.page === 'carManage' || query.page === 'shortOrder' || query.page === 'longOrder') {
        getCarInfo(paramsCarId)

        if (query.page === 'carManage') {
          form.value.carId = paramsCarId
          getOrderNumber(form.value.carId, form.value.orderTime)
        }
      } else {
        getViolationList(paramsCarId)
        fieldList.value = [...fieldList.value, { label: '违章单号', prop: 'violantionCode' }, { label: '违章状态', prop: 'eventStatusStr' }]
      }
    }
  })

  /**
   * 清除关联订单号、交车人、负责人、违章押金收取方式
   */
  const clearOrderId = () => {
    form.value.orderId = undefined
    form.value.giveStaffName = undefined
    form.value.staffId = undefined
    form.value.violationChargeType = undefined
  }
</script>

<style lang="less" scoped>
  .empty-custom-fee {
    margin: 30px 0 35px;
    justify-content: center;
    :deep(.arco-empty) {
      .arco-empty-description {
        color: #d8d8d8;
        font-size: 12px;
      }
      .arco-icon {
        color: #d8d8d8;
      }
    }
  }
  .handel-box {
    width: 100%;
    background-color: rgba(247, 248, 250, 0.5);
    padding: 20px 20px;
  }
</style>
